<template>
  <div class="carModelBaseInfo">
    <h4 class="withVerticleLineT4 title14">{{ $t('orderInfo') }}</h4>
    <div class="baseInfoItems">
      <full-parent-dom-with-dask :loading="loadingData"></full-parent-dom-with-dask>
      <!-- 订单编号 -->
      <a-row class="baseInfoItem">
        <a-col :md="10">{{ $t('orderNum') }}</a-col>
        <a-col
          :md="14"
          class="result"
        ><table-ellipsis :text="detailBaseInfoData.orderNum || '-'"></table-ellipsis
        ></a-col>
      </a-row>
      <!-- 商品代码 -->
      <a-row class="baseInfoItem" v-show="isShopOrder">
        <a-col :md="10">{{ $t('goodsCode') }}</a-col>
        <a-col
          :md="14"
          class="result"
        ><table-ellipsis :text="detailBaseInfoData.goodsCode || '-'"></table-ellipsis
        ></a-col>
      </a-row>
      <!-- 订单金额(元) -->
      <a-row class="baseInfoItem" v-show="isShopOrder">
        <a-col :md="10">{{ $t('orderAmount') }}</a-col>
        <a-col
          :md="14"
          class="result"
        ><table-ellipsis :text="detailBaseInfoData.price || '-'"></table-ellipsis
        ></a-col>
      </a-row>
      <!-- 操作流水 -->
      <a-row class="baseInfoItem">
        <a-col :md="10">{{ $t('operationFlow') }}</a-col>
        <a-col
          :md="14"
          class="result"
        ><table-ellipsis :text="detailBaseInfoData.operateSn || '-'"></table-ellipsis
        ></a-col>
      </a-row>
      <!-- 订单类型 -->
      <a-row class="baseInfoItem">
        <a-col :md="10">{{ $t('orderForm') }}</a-col>
        <a-col
          :md="14"
          class="result"
        ><table-ellipsis

          :text="orderTypeDictCodeObj[detailBaseInfoData.orderType] || '-'"
        ></table-ellipsis
        ></a-col>
      </a-row>
      <!-- 订单状态 -->
      <a-row class="baseInfoItem">
        <a-col :md="10">{{ $t('orderState') }}</a-col>
        <a-col
          :md="14"
          class="result"
        ><table-ellipsis

          :text="serviceOrderStatusDictCodeObj[detailBaseInfoData.orderStatus] || '-'"
        ></table-ellipsis
        ></a-col>
      </a-row>
      <!-- 支付状态 -->
      <a-row class="baseInfoItem" v-show="isShopOrder">
        <a-col :md="10">{{ $t('payState') }}</a-col>
        <a-col
          :md="14"
          class="result"
        ><table-ellipsis

          :text="payStatusDictCodeObj[detailBaseInfoData.payStatus] || '-'"
        ></table-ellipsis
        ></a-col>
      </a-row>
      <!-- 开票状态 -->
      <a-row class="baseInfoItem" v-show="isShopOrder">
        <a-col :md="10">{{ $t('invoicingState') }}</a-col>
        <a-col
          :md="14"
          class="result"
        ><table-ellipsis

          :text="billStatusDictCodeObj[detailBaseInfoData.billStatus] || '-'"
        ></table-ellipsis
        ></a-col>
      </a-row>
      <!-- 退款状态 -->
      <a-row class="baseInfoItem" v-show="isShopOrder">
        <a-col :md="10">{{ $t('refundState') }}</a-col>
        <a-col
          :md="14"
          class="result"
        ><table-ellipsis

          :text="orderRefundStatusDictCodeObj[detailBaseInfoData.refundStatus] || '-'"
        ></table-ellipsis
        ></a-col>
      </a-row>
      <!-- VIN -->
      <a-row class="baseInfoItem">
        <a-col :md="10">VIN</a-col>
        <a-col
          :md="14"
          class="result"
        ><table-ellipsis :text="detailBaseInfoData.vin || '-'"></table-ellipsis
        ></a-col>
      </a-row>
      <!-- 车型代码 -->
      <a-row class="baseInfoItem">
        <a-col :md="10">{{ $t('modelCode') }}</a-col>
        <a-col
          :md="14"
          class="result"
        ><table-ellipsis :text="detailBaseInfoData.modelCode || '-'"></table-ellipsis
        ></a-col>
      </a-row>
      <!-- 车型名称 -->
      <a-row class="baseInfoItem">
        <a-col :md="10">{{ $t('modelName') }}</a-col>
        <a-col
          :md="14"
          class="result"
        ><table-ellipsis :text="detailBaseInfoData.modelName || '-'"></table-ellipsis
        ></a-col>
      </a-row>
      <!-- 版型 -->
      <a-row class="baseInfoItem">
        <a-col :md="10">{{ $t('stereotype') }}</a-col>
        <a-col
          :md="14"
          class="result"
        ><table-ellipsis :text="detailBaseInfoData.trimLevel || '-'"></table-ellipsis
        ></a-col>
      </a-row>
      <!-- 创建人 -->
      <a-row class="baseInfoItem" v-if="!isShopOrder">
        <a-col :md="10">{{ $t('creator') }}</a-col>
        <a-col
          :md="14"
          class="result"
        ><table-ellipsis :text="detailBaseInfoData.createBy || '-'"></table-ellipsis
        ></a-col>
      </a-row>
      <!-- 创建时间 -->
      <a-row class="baseInfoItem">
        <a-col :md="10">{{ $t('timeOfCreation') }}</a-col>
        <a-col
          :md="14"
          class="result"
        ><table-ellipsis

          :text="$commonFun.getDateTimeStr(detailBaseInfoData.createTime) || '-'"
        ></table-ellipsis
        ></a-col>
      </a-row>
      <!-- 支付时间 -->
      <a-row class="baseInfoItem" v-show="isShopOrder">
        <a-col :md="10">{{ $t('payTime') }}</a-col>
        <a-col
          :md="14"
          class="result"
        ><table-ellipsis

          :text="$commonFun.getDateTimeStr(detailBaseInfoData.payTime) || '-'"
        ></table-ellipsis
        ></a-col>
      </a-row>
      <!-- 开票时间 -->
      <a-row class="baseInfoItem" v-show="isShopOrder">
        <a-col :md="10">{{ $t('invoicingTime') }}</a-col>
        <a-col
          :md="14"
          class="result"
        ><table-ellipsis

          :text="$commonFun.getDateTimeStr(detailBaseInfoData.billTime) || '-'"
        ></table-ellipsis
        ></a-col>
      </a-row>
      <!-- 退款时间 -->
      <a-row class="baseInfoItem" v-show="isShopOrder">
        <a-col :md="10">{{ $t('refundTime') }}</a-col>
        <a-col
          :md="14"
          class="result"
        ><table-ellipsis

          :text="$commonFun.getDateTimeStr(detailBaseInfoData.refundTime) || '-'"
        ></table-ellipsis
        ></a-col>
      </a-row>
      <!-- 充值手机号 -->
      <a-row class="baseInfoItem">
        <a-col :md="10">{{ $t('userPhone') }}</a-col>
        <a-col :md="14" class="result"><table-ellipsis :text="detailBaseInfoData.memberPhone || '-'"></table-ellipsis></a-col>
      </a-row>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import FullParentDomWithDask from '@/components/LoadDataSpin/FullParentDomWithDask.vue'
import TableEllipsis from '@/components/Ellipsis/TableEllipsis'
export default {
  components: {
    FullParentDomWithDask,
    TableEllipsis
  },
  props: {
    detailBaseInfoData: {
      type: Object,
      default () {
        return {}
      }
    },
    loadingData: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    ...mapState({}),
    // 订单类型
    orderTypeDictCodeObj () {
      return this.$store.getters.getOrderManageDictCodeObj('orderType')
    },
    // 订单状态
    serviceOrderStatusDictCodeObj () {
      return this.$store.getters.getDictCodeObj('serviceOrderStatusDictCode')
    },
    // 支付状态
    payStatusDictCodeObj () {
      return this.$store.getters.getOrderManageDictCodeObj('payStatus')
    },
    // 开票状态
    billStatusDictCodeObj () {
      return this.$store.getters.getOrderManageDictCodeObj('billStatus')
    },
    // 退款状态
    orderRefundStatusDictCodeObj () {
      return this.$store.getters.getDictCodeObj('orderRefundStatusDictCode')
    },
    // 是否为商城订单
    isShopOrder () {
      return this.detailBaseInfoData.orderType === 1
    }
  },
  created () {},
  data () {
    return {}
  },
  methods: {}
}
</script>
<style lang="less" scoped>
.carModelBaseInfo {
  margin-bottom: 10px;
  .baseInfoItems {
    position: relative;
    padding-bottom: 15px;
  }
  .baseInfoItem {
    margin-top: 15px;
    .result {
      text-align: right;
    }
  }
}
</style>
<style lang="less">
.editupdateStrategyDialog {
  .ant-modal-footer {
    margin-top: 15px;
  }
}
</style>
